<template>
  <div id="airpage">
    <div class="index-content">
     <div class="title">室内空气质量信息实时展示</div> <br /><br />
      <div to="/home" class="return" @click='back'> 返回  </div><br /><br />
      <router-link to="/PM" :class="nowInfo.pm<75?'':'red'" >PM2.5</router-link>
      <div>
        <span class="PM" :class="nowInfo.pm<75?'':'red'"  >{{nowInfo.pm}}</span>
        <span :class="nowInfo.pm<75?'':'red'">μg/m³</span>
      </div>
      <div class="detail">
        <div  class="info">
          <router-link to="/temperature" :class="16<nowInfo.temperature &&nowInfo.temperature<26?'':'red'">室内温度</router-link>
          <div>
            <span class="number" :class="16<nowInfo.temperature &&nowInfo.temperature<26?'':'red'">{{nowInfo.temperature}}</span>
            <span :class="16<nowInfo.temperature &&nowInfo.temperature<26?'':'red'">℃</span>
          </div>
        </div>
        <div class="info">
          <router-link to="/humidity" :class="30<nowInfo.humidity &&nowInfo.humidity<80?'':'red'">室内湿度</router-link>
          <div>
            <span class="number" :class="30<nowInfo.humidity &&nowInfo.humidity<80?'':'red'">{{nowInfo.humidity}}</span>
            <span :class="30<nowInfo.humidity &&nowInfo.humidity<80?'':'red'">%RH</span>
          </div>
        </div>
        <div class="info">
          <router-link to="/carbonDioxide" :class="nowInfo.carbonDioxide<1000?'':'red'">二氧化碳浓度</router-link>
          <div>
            <span class="number" :class="nowInfo.carbonDioxide<1000?'':'red'">{{nowInfo.carbonDioxide}}</span>
            <span :class="nowInfo.carbonDioxide<1000?'':'red'">ppm</span>
          </div>
        </div>
        <div class="info">
          <router-link to="/formaldehyde" :class="nowInfo.formaldehyde<100?'':'red'">甲醛浓度</router-link>
          <div>
            <span class="number" :class="nowInfo.formaldehyde<100?'':'red'">{{nowInfo.formaldehyde}}</span>
            <span :class="nowInfo.formaldehyde<100?'':'red'">μg/m³</span>
          </div>
        </div>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { getInfo } from "@/api";
import { mapGetters, mapState} from "vuex";

export default {
  name: "airInfo",
  components: {},
  data() {
    return {
    };
  },
  computed:{
  ...mapState({
    nowInfo: (state) => state.airInfo.airhInfo,
  }),
  },
  created() {
  },
  mounted(){
    this.getNowInfo();
  },
  methods: {
    temperature() {
      this.$router.push("/airInfo/temperature");
    },
    back(){
      this.$router.push("/home");
    },
    // gettime() {
    //   this.timer = setInterval(() => {
    //     this.fnDate();
    //   }, 5000);
    // },
    //获取当前质量信息
    async getNowInfo() {
      this.$store.dispatch("getAirInfo");
      this.timer = setInterval(() => {
        if (this.timer) {
          clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
        }
        this.getNowInfo();
      }, 5000);
    },
  },
    beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
};
</script>

<style scoped lang='less'>
#airpage {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  color: @airColor;
  background-image:url( "../../assets/images/bg.png" );
  a{ color: @airColor;}
  .return{
  width: 80px;
  height: 32px;
  line-height: 32px;
  margin-left:-20px;
  color: #fff;
  text-align: center;
  border-radius:0px 16px 16px 0px ;
  background-color:@airColor ;
  }
  .index-content {
    width: 100%;
    height: 700px;
    position: absolute;
    padding-left:20px ;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    font-size: 20px;
    .title{
      color:@sucColor;
      font-size: 29px;
      font-weight: 800;
    }
    .PM {
      font-size: 60px;
    }
    .red{
      color: @priceColor;
    }
    .detail {
      margin-top: 30px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      .info {
      a{
        color: @airColor;
        }
      .red{
        color: @priceColor;
      }
        .white{
          color: white;
        }
        width: 50%;
        height: 100px;
        .number {
          font-size: 45px;
        }
      }
    }
  }
}
</style>